<template>
  <div class="emergency_box">
    <div class="emergency_top">
      <div class="emergency_title">设备紧急程度分布</div>
      <div class="emergency_month">
        <div :class="searchDateNumber == 2? 'emergency_ThisMarch1':'emergency_March'" @click="getList(2)"><span>近三个月</span></div>
        <div :class="searchDateNumber == 1? 'emergency_ThisMarch1':'emergency_LastMarch'" @click="getList(1)"><span>上月</span></div>
        <div :class="searchDateNumber == 0? 'emergency_ThisMarch2':'emergency_ThisMarch'" @click="getList(0)"><span>本月</span></div>
      </div>
    </div>

    <div v-if="tableData&&tableData.length>0" id="urgency" ref="echartsRef" class="echarts_div" />
    <div v-else class="echarts_noData">
      <svg-icon icon-class="暂无数据" />
    </div>
  </div>
</template>

<script>
import { deviceEmergencyDegreeDistribution } from '@/api/equipmentManage/equipmentReport/dataBoard'
import { mapGetters } from 'vuex'
import Big from 'big.js'
export default {
  name: 'EmergencyDegreeDistribution',
  computed: {
    ...mapGetters([
      'windowResizeTag'
    ])
  },
  watch: {
    windowResizeTag() {
      if (this.myChart) {
        this.$nextTick(() => {
          setTimeout(() => {
            this.drawLine()
          }, 500)
        })
      }
    }
  },
  data() {
    return {
      msg: 'fafa',
      tableData: ['1'],
      colorData: ['1'],
      searchDateNumber: 0,
      allNumber: 0,
      colorArray: [
        { name: '轻微', color: '#6CF72D' },
        { name: '重要', color: '#FFCC00' },
        { name: '紧急', color: '#FF8385' }
      ],
      pageData: {
        searchDateNumber: 0,
        isContinuous: 0
      },
      timer: undefined,
      myChart: undefined
    }
  },
  mounted() {
    this.resetScale() // 重置缩放
    // this.drawLine()
    this.getList(0)
  },
  beforeDestroy() {
    // 页面关闭清除定时器
    clearInterval(this.timer)
  },
  methods: {
    resetScale() {
      const scaleX = this.$refs.echartsRef.clientWidth / 797
      const scaleY = this.$refs.echartsRef.clientHeight / 250
      this.$refs.echartsRef.style.transform = 'scale(' + Math.min(scaleX, scaleY) + ')'
      this.$refs.echartsRef.style.transformOrigin = 'left'
      this.$refs.echartsRef.style.marginRight = -(797 * (1 - Math.min(scaleX, scaleY))) + 'px'
    },
    getData(res) {
      const arr = []
      const colors = []
      this.colorArray.forEach(item => {
        if (res.data.some(item2 => item.name == item2.emergencyDegree)) {
          const matchedItem = res.data.filter(item3 => item3.emergencyDegree == item.name)[0]
          if (matchedItem.count && matchedItem.count != '0') {
            arr.push({
              value: (matchedItem.count / this.allNumber * 100).toFixed(2),
              name: matchedItem.emergencyDegree + ',' + matchedItem.count
              // count: matchedItem.count
            })
            colors.push(item.color)
          }
        }
      })

      if (this.myChart) {
        this.myChart = this.$echarts.init(document.getElementById('urgency')).dispose()
      }
      this.tableData = arr
      this.colorData = colors
      this.$nextTick(() => {
        this.drawLine()
      })
    },
    sum(arr) {
      return arr.reduce(function(prev, curr) {
        return new Big(prev).plus(curr).toString()
      })
    },
    getList(num) {
      clearInterval(this.timer)
      this.searchDateNumber = num
      switch (num) {
        case 0:
          this.pageData.searchDateNumber = 0
          this.pageData.isContinuous = 0
          break
        case 1:
          this.pageData.searchDateNumber = 1
          this.pageData.isContinuous = 0
          break
        case 2:
          this.pageData.searchDateNumber = 2
          this.pageData.isContinuous = 1
          break
      }
      this.getListData(this.pageData.searchDateNumber, this.pageData.isContinuous)
      this.timer = setInterval(() => {
        this.getListData(this.pageData.searchDateNumber, this.pageData.isContinuous)
      }, this.$store.state.common.refreshFrequency * 1000)
    },
    getListData(searchDateNumber, isContinuous) {
      deviceEmergencyDegreeDistribution({
        searchDateNumber: searchDateNumber,
        isContinuous: isContinuous
      }).then(res => {
        this.allNumber = this.sum(res.data.map(item => item.count))
        this.getData(res)
      })
    },
    drawLine() {
      // const myChart = this.$echarts.init(document.getElementById('urgency'))
      // const arr = []
      // this.tableData.forEach(item => {
      //   arr.push({
      //     value: item.number,
      //     name: item.emergencyDegree
      //   })
      // })
      if (this.tableData && this.tableData.length > 0) {
        this.myChart = this.$echarts.init(document.getElementById('urgency'))
        this.myChart.setOption({
          tooltip: {
            trigger: 'item'
          },
          // 右边信息面板
          // 右边信息面板
          legend: {
            orient: 'vertical',
            right: '10%',
            top: 'middle',
            itemHeight: 14,
            itemWidth: 27,
            itemGap: 30,
            formatter: (name) => {
              const params1 = name.split(',')[0]
              // if (params1.length > 7) {
              //   params1 = params1.substr(0, 6) + '...'
              // }
              const params2 = name.split(',')[1]
              const arr = [
                '{a|' + params1 + '}',
                '{b|' + params2 + '}'
              ]
              return arr.join('')
            },
            textStyle: {
              rich: {
                a: {
                  color: '#000000',
                  fontSize: 16,
                  padding: [0, 20],
                  width: 50
                },
                b: {
                  // align: 'right',
                  fontSize: 18,
                  width: 80
                }
              }
            }
            // textStyle: {
            //   color: '#000000',
            //   fontSize: 16,
            //   padding: [0, 20]
            // }
          },
          // 设置饼状图每个颜色块的颜色
          color: this.colorData,
          // 牵引线
          series: [
            {
              type: 'pie',
              radius: ['44%', '55%'],
              center: ['35%', '50%'],
              avoidLabelOverlap: true,
              silent: true,
              itemStyle: {
                borderRadius: 6,
                borderColor: '#fff',
                borderWidth: 3
              },
              label: {
                padding: [0, -60],
                formatter: function(e) {
                  const {
                    data: { name, value }
                  } = e
                  const params1 = name.split(',')[0]
                  return `{a|${params1}}{a|${value}%}\n\n`
                },
                rich: {
                  a: { fontSize: 14, color: '#000000' }
                }
              },
              // emphasis: {
              //   label: {
              //     show: true,
              //     fontSize: '40',
              //     fontWeight: 'bold'
              //   }
              // },
              labelLine: {
                show: true, // 数据标签引导线
                // 牵引线长度
                length: 30,
                length2: 60,
                lineStyle: {
                  width: 1,
                  type: 'solid',
                  color: '#D8D8D8'
                }
              },
              data: this.tableData
            }
          ]
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.emergency_box{
  width: 100%;
  height: 100%;
  //height: calc(100% - 50px);
}
  .emergency_top{
    display: flex;
    justify-content: space-between;
    .emergency_title{
      font-size: 20px;
      line-height: 34px;
      font-weight: bold;
      letter-spacing: -0.21px;
      color: #333333;
      padding-top: 16px;
      padding-left: 20px;
    }
    .emergency_month{
      display: flex;
      font-size: 18px;
      font-weight: normal;
      line-height: 25px;
      letter-spacing: -0.16px;
      color: #999999;
      padding-top: 22px;
      padding-right: 20px;
      cursor: pointer;
      .emergency_ThisMarch1{
        font-size: 18px;
        font-weight: normal;
        line-height: 25px;
        letter-spacing: -0.16px;
        color: #387BFC;
        padding-right: 30px;
      }
      .emergency_ThisMarch2{
        font-size: 18px;
        font-weight: normal;
        line-height: 25px;
        letter-spacing: -0.16px;
        color: #387BFC;
      }
      .emergency_March{
        padding-right: 30px;
      }
      .emergency_LastMarch{
        padding-right: 30px;
      }
    }
  }

.echarts_div{
  height: calc(100% - 50px);
  padding: 20px 0 20px 10px;
}
.echarts_noData{
  height: calc(100% - 50px);
}
</style>

